<template>
  <div class="homePage m-layout" v-bind:class="{'m-layout-side-min':isCollapse}">
    <div class="m-layout-header">
        <div class="m-layout-header-left fl">
           <div class="system_name">{{webSiteBigTitle}}</div>
        </div>
        <div class="m-layout-header-mid fl">
          <i class="el-icon-menu" style="line-height:60px;font-size:30px;" @click="toggleCollapse"></i>  
        </div>
        <div class="m-layout-header-right fr"></div>
    </div>
    <div class="m-layout-body">
        <div class="m-layout-side" >
        <el-menu
            hide-timeout="0"
                :collapse="isCollapse"
                default-active="1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#324156"
                text-color="#fff"
                active-text-color="#459FFC">
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>示例页面</span>
                  </template>
                  <el-menu-item index="1-1" @click="gotoPage('/Demo/Table')" >表格页</el-menu-item>
                  <el-menu-item index="1-2" @click="gotoPage('/Demo/Edit')" >编辑页</el-menu-item>
                  <el-submenu index="1-3">
                    <template slot="title">选项4</template>
                    <el-menu-item index="1-3-1">选项1</el-menu-item>
                  </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>示例页面</span>
                  </template>
                  <el-menu-item index="2-1" @click="gotoPage('/Demo/Table')" >表格页</el-menu-item>
                  <el-menu-item index="2-2" @click="gotoPage('/Demo/Edit')" >编辑页</el-menu-item>
                </el-submenu>
                
                <el-menu-item index="3">
                  <i class="el-icon-document"></i>
                  <span slot="title">导航三</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <i class="el-icon-setting"></i>
                  <span slot="title">导航四</span>
                </el-menu-item>
        </el-menu>
        </div>
        <div class="m-layout-body-main">
            <div class="m-layout-body-main-tabs">做单页多Tab(div)切换,</div>
            <div class="m-layout-body-main-content">
               <transition name="router-slid" mode="out-in">
                  <keep-alive>
                    <router-view v-if="$route.meta.keepAlive"></router-view>
                  </keep-alive>
                </transition>
                <transition name="router-slid" mode="out-in">
                  <router-view v-if="!$route.meta.keepAlive"></router-view>
                </transition>
            </div>
           
        </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      msg: "home",
      isCollapse: false
    };
  },
  methods: {
    navClick(item) {
      var toPath = "/Demo/Table";
      this.$router.push({
        //你需要接受路由的参数再跳转
        path: toPath
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  },
  computed: {
    ...mapState({
      webSiteBigTitle: state => state.webSiteBigTitle
    })
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss" scoped>
.m-layout {
  height: 100%;
  background-color: lightblue;
}

.m-layout-header {
  height: 60px;
  background-color: #242f42;
}
.m-layout-body {
  height: calc(100% - 60px);
  background-color: lightcoral;
}

.m-layout-side {
  height: 100%;
  width: 220px;
  background-color: #324155;
  float: left;
  transition: width 0.1s;
  -moz-transition: width 0.1s; /* Firefox 4 */
  -webkit-transition: width 0.1s; /* Safari 和 Chrome */
  -o-transition: width 0.1s;
}

.m-layout-body-main {
  height: 100%;
  width: calc(100% - 220px);
  background-color: #f2f2f2;
  float: right;
  transition: width 0.1s;
  -moz-transition: width 0.1s; /* Firefox 4 */
  -webkit-transition: width 0.1s; /* Safari 和 Chrome */
  -o-transition: width 0.1s;
}

.m-layout-body-main-tabs {
  height: 56px;
  line-height: 56px;
  background-color: lightseagreen;
  color: white;
  font-size: 20px;
}

.m-layout-body-main-content {
  height: calc(100% - 56px);
  background-color: #f2f2f2;
  transition: width 0.1s;
  -moz-transition: width 0.1s; /* Firefox 4 */
  -webkit-transition: width 0.1s; /* Safari 和 Chrome */
  -o-transition: width 0.1s;
  overflow: scroll;
  padding: 15px;
}

.m-layout-side-min {
  .m-layout-side {
    width: 64px;
  }

  .m-layout-body-main {
    width: calc(100% - 64px);
  }
}

.m-layout-body-main > div {
}

.m-layout-header-left {
  width: 220px;
  line-height: 60px;
  color: white;
  font-size: 20px;
  text-align: center;
}

.system_sub_name {
  line-height: 60px;
  color: white;
  font-size: 2px;
  text-align: center;
  vertical-align: sub;
}

.el-menu {
  border-right: none;
}

.router-fade-enter-active,
.router-fade-leave-active {
  transition: opacity 0.3s;
}
.router-fade-enter,
.router-fade-leave-active {
  opacity: 0;
}

.router-slid-enter-active,
.router-slid-leave-active {
  transition: all 0.4s;
}
.router-slid-enter,
.router-slid-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
</style>
